<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- <img src="cat.png" alt="">  -->

     <!-- <input type="button" value="播放"> 这是一个按钮 -->
<!-- 
     <input type="checkbox" id = "all">我全都要 <br>
     <input type="checkbox" class = "girl">貂蝉 <br>
     <input type="checkbox" class = "girl">小乔 <br>
     <input type="checkbox" class = "girl">妲己 <br>
     <input type="checkbox" class = "girl">张飞 <br> -->


     <!-- <div style="font-size: 20px">这是一个文本</div> -->

     <!-- <style>
         .light {
             background-color: #fff;
             color: #000;
         }

         .dark {
             background-color: #000;
             color: #fff;
         }

     </style>

     <div class = "light">这是一段话</div>
     <button>关灯</button> -->

     <div class = "container">

     </div>

     <button>删除 div</button>



     <script>

//创建节点
         let newDiv = document.createElement('div');
         newDiv.id = 'newDiv';
         newDiv.className = 'one';
         newDiv.innerHTML = 'hello';
         console.log(newDiv);

         let container = document.querySelector('.container');
         container.appendChild(newDiv);

         let button = document.querySelector('button');
//删除节点
         button.onclick = function() {
             container.removeChild(newDiv);
         }





        //  let div = document.querySelector('div');
        //  let button = document.querySelector('button');
        //  button.onclick =function() {
        //      if(div.className == 'light') {
        //          div.className = 'dark';
        //          button.innerHTML = '开灯';
        //      }else if(div.className == 'dark') {
        //          div.className = 'light';
        //          button.innerHTML = '关灯';

        //      }
        //  }



        //  //点击放大字体
        //  let div = document.querySelector('div');
        //  div.onclick = function() {
        //     //1.先获取 当前字体大小
        //     console.log(parseInt(div.style.fontSize));
        //     let fontSize = parseInt(div.style.fontSize);
        //     //2.在当前字体大小的基础上,多增加 5px
        //     fontSize += 5;
        //     div.style.fontSize = fontSize + 'px';
        // }

     </script>



        <!-- <script> 
        
        
            


         //1.现获取到元素 
         // # 用于获取 id . 用于获取 class
        //  let all = document.querySelector('#all');
        //  let girls = document.querySelectorAll('.girl');
         //2.给 all 注册点击事件
        //  all.onclick = function() {
        //      for(let i = 0;i< girls.length;i++) {
        //          //all.checked 就是 all 这个复选框的选中状态
        //          //如果all这个复选框是选中状态,那么i就是选中
        //          girls[i].checked = all.checked;
        //      }
        //  }
        //  //3.针对每个 girl 注册点击事件,实现对于 all 的取消操作
        //  for(let i = 0;i<girls.length;i++) {
        //      girls[i].onclick = function() {
        //          all.checked = checkGirls(girls);
        //      }
        //  }
        //  function checkGirls(girls) {
        //      //判定是不是所有的girl 都被选中
        //      for(let i = 0;i < girls.length;i++) {
        //          if(!girls[i].checked) {
        //              //只要一个妹子没有被选中,就让 all 是未选中状态
        //              return '';
        //          }
        //      }
        //      //遍历一遍,所有妹子都被选中,就让all 也是选中状态
        //     return 'checked';

        //  }




        // let input = document.querySelector('input');
        // input.onclick = function(){
        //     if(input.value == '播放') {
        //         input.value = '暂停';
        //     }else if(input.value == '暂停') {
        //         input.value = '播放';
        //     }
        // }









//  切换图片
        // let img = document.querySelector('img');
        // img.onclick = function() {
        //     console.dir(img);
        //     if(img.src.indexOf('cat.png')>=0) {
        //         img.src = 'dog.png';

        //     }else if(img.src.indexOf('dog.png')>=0) {
        //         img.src = 'cat.png';
        //     }
        // }


    </script> -->

</body> 
    

</html>